<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="queryParamsRule"
        :rules="queryParamsRule"
        :model="queryParams"
        label-width="120px"
        label-position="right"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="合同编码:" prop="contractNo">
              <el-input
                v-model="queryParams['contractNo']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业主编号:" prop="otherbodycode">
              <el-input
                v-model="queryParams['otherbodycode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业主名称:" prop="otherbodyname">
              <el-input
                v-model="queryParams['otherbodyname']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="银行账号:" prop="account">
              <el-input
                v-model="queryParams['account']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="账户名:" prop="accountName">
              <el-input
                v-model="queryParams['accountName']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户联号:" prop="bankChain">
              <el-input
                v-model="queryParams['bankChain']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="地市编码:" prop="ownerCityCode">
              <el-input
                v-model="queryParams['ownerCityCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="识别编码:" prop="seriesNo">
              <el-input
                v-model="queryParams['seriesNo']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div>
              <span>调用次数/日：</span><span>{{ queryCount }}</span>
            </div>
            <div>
              <a
                class="link"
                href="javascript:;"
                @click="$router.push({ name: 'biz-ml' })"
                >详情</a
              >
            </div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              用户在物业系统发起场租支付时，将发起支付/报账的收款人信息与合同中的业主收款信息进行一致性校验，如发现物业付款信息与合同系统中业主收款信息不一致，则提示用户检查收款信息是否合规，从而避免出现错付引发的争议。
            </div>
          </div>
          <div class="page-tip">
            <div class="params-tip" @click.ctrl.alt="clickExample">
              <span>示例参数</span>：合同编码:CTC-HYZZ-DC-004113,
              业主编码:0204012,
              业主名称:孟海滨,
              银行账号:905520120109012183,
              账户名:郑州市金水区南阳路街道办事处孟砦村委会,
              开户行联行号:313491000520, 地市编码:410100, 识别编码:1
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row
                v-for="(item, index) in dialog.content"
                :key="index"
                class="dialog-row"
              >
                <el-col> 识别编码: {{ item.seriesNo }} </el-col>
                <el-col>
                  校验结果:
                  {{ item.verifyCode == "0" ? "审核未通过" : "审核通过" }}
                </el-col>
                <el-col> 校验说明: {{ item.returnMsg || "无" }} </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import mixin from './mixins'
export default {
  name: "receiptVerify", // 资金支付安全-业主收款信息一致性校验
  mixins: [mixin],
  data() {
    return {
      queryCount: 0,
      queryParams: {
        contractNo: "",
        otherbodycode: "",
        otherbodyname: "",
        account: "",
        accountName: "",
        bankChain: "",
        seriesNo: "",
        ownerCityCode: ""
      },
      dialog: {
        title: "",
        content: []
      },
      options: [
        {
          value: "tssai",
          key: "1"
        }
      ],
      queryParamsRule: {
        contractNo: [
          {
            required: true,
            message: "请输入合同编码",
            trigger: "blur"
          }
        ],
        otherbodycode: [
          {
            required: true,
            message: "请输入业主编码",
            trigger: "blur"
          }
        ],
        otherbodyname: [
          {
            required: true,
            message: "请输入业主名称",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "请输入银行账号",
            trigger: "blur"
          }
        ],
        accountName: [
          {
            required: true,
            message: "请输入账户名称",
            trigger: "blur"
          }
        ],
        bankChain: [
          {
            required: true,
            message: "请输入开户联号",
            trigger: "blur"
          }
        ],
        ownerCityCode: [
          {
            required: true,
            message: "请输入地市编码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.queryPageCount("3.3");
  },
  mounted() {},
  computed: {},
  methods: {
    async buttonClick() {
      try {
        this.dialog = {
          title: "",
          content: []
        };

        await this.$refs["queryParamsRule"].validate();
        const data = [
          {
            contractNo: this.queryParams["contractNo"],
            otherbodycode: this.queryParams["otherbodycode"],
            otherbodyname: this.queryParams["otherbodyname"],
            account: this.queryParams["account"],
            accountName: this.queryParams["accountName"],
            bankChain: this.queryParams["bankChain"],
            seriesNo: this.queryParams["seriesNo"],
            ownerCityCode: this.queryParams["ownerCityCode"]
          }
        ];
        const r = await this.$http({
          url: this.$http.adornBizUrl(
            "/phase/three/supplier/info/verifications"
          ),
          method: "post",
          data: this.$http.adornData("param=" + JSON.stringify(data), false),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        console.log(r.data);
        if (r.data.resultStat === "000") {
          // console.log(r.data.data.retiurnMsg)
          this.dialog.content = r.data.data;

          // this.dialog.title = r.data.data.retiurnMsg
        } else {
          this.dialog.title = r.data.mess;
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.listLoading = false;
      }
    },
    // getTitle(key) {
    //   const option = this.options.filter(o => o.key === key);
    //   let value = null;
    //   if (option[0]) {
    //     value = option[0].value;
    //   }
    //   return value;
    // },
    reset() {
      this.queryParams = {
        prjCode: "",
        operationId: ""
      };

      this.dialog = {
        title: "",
        content: []
      };
      this.$refs["queryParamsRule"].clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },

    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl("/log/queryStatistics"),
          method: "post",
          data: this.$http.adornData(
            "param=" + JSON.stringify({ scene: scene }),
            false
          ),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data && r.data.data.length > 0) {
          var result = r.data.data[0];
          this.queryCount = result.cnt || "0";
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/formatQueryPage";
@include formatQueryPage(120px, 60%);
.el-input {
  width: 60%;
}

.el-select {
  width: 60%;
}

.query {
  color: rgba(255, 255, 255, 1);
  background: rgba(235, 75, 75, 1);
  border-radius: 6px;
  border-color: rgba(235, 75, 75, 1);
}
.custom-button {
  display: flex;
  justify-content: center;
}

.dialog-row {
  margin-bottom: 5px;
}
</style>
